<template>
  <el-form-item
    :prop="prop"
    :label="label"
    >
      <el-radio-group
        v-model="value"
        @change="changeRadio"
      >
        <template v-for="(item, index) in option" :key="index">
          <el-radio
            :label="item.coreVal"
            :size="size"
            :disabled="item.disabled"
            :border="border"
          >{{item.label}}</el-radio>
        </template>
      </el-radio-group>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseRadioGroup">
import { computed } from "vue"

interface optionRadioType {
  label: string,
  hint?: string,
  coreVal: string | number,
  coreApi?: string,
  disabled: boolean
};
let props = withDefaults(defineProps<{
    prop?: string,
    label?: string,
    option: optionRadioType[],
    modelValue: any
    size?: string,
    border?: boolean, 
  }>(), {
    modelValue: '',
    size: 'large',
    border: false,
    option: () => {
      return [
        {
          label: "按钮1",
          coreVal: "1",
          disabled: false
        }
      ]
    }
  })

let emits = defineEmits(['change', 'update:modelValue'])

const value = computed({ // 重新定义
  get: () => props.modelValue,
  set: (value: string) => emits("update:modelValue", value),
})

const changeRadio = (val: string) => {
  emits("change", val)
}
</script>

<style lang="less" scoped>
 .container {
 }
</style>
